<template>
  <div id="app" class="skLifeSleep">
    <!-- 睡眠 -->
    <sk-life-template @className="getClassName" v-bind="$attrs" v-on="$listeners" :cardTitle="'人均睡眠时长(分钟)'" :classCount="classCount">
      <template slot="centerData">
        <a-spin :spinning="barLoading">
          <div v-show="barShow">
            <bar
              :barName="barName"
              :barData="barData"
              :color="['#A9F387', '#48D8BF']"
              :barWidth="10"
              :symbolSize="5"
              v-on="$listeners"
              :width="'100%'"
              :seriesName="'平均睡眠时长(分钟)'"
              :height="'380px'"
            ></bar>
          </div>
          <div v-show="!barShow">
            <horizontal-bar  :barName="barName" :seriesName="'睡眠时长(分钟)'" v-on="$listeners" :barData="barData" :width="'100%'" :height="'380px'" :color="['#41D7F3', '#3D9FFF']"></horizontal-bar>
          </div>
        </a-spin>
      </template>
      <template slot="leftTitle">
        <p>{{ className }}睡眠情况比例图</p>
      </template>
      <template slot="rightViewBtn">
        <a-button size="small" type="primary" @click="viewDetail">
          <span>查看详情</span>
          <a-icon type="caret-right" />
        </a-button>
      </template>
      <template slot="rightData">
        <a-row>
          <a-col :span="12">
            <trends-pie :width="'100%'" :height="'277px'" :className="className" :data="pieData" style="margin-top:35px;"></trends-pie>
          </a-col>
          <a-col :span="12">
            <line-chart
              :width="'100%'"
              :height="'400px'"
              :data="lineData"
              :color="['#1890FF', '#1890FF']"
              :seriesName="'入睡率'"
              :unit="'%'"
            ></line-chart>
          </a-col>
        </a-row>
      </template>
    </sk-life-template>
  </div>
</template>
<script>
import skLifeTemplate from '@/components/skComponent/ClassCard.vue'
import Bar from '@/components/Echarts/Bar.vue'
import TrendsPie from '@/components/Echarts/TrendsPie.vue'
import LineChart from '@/components/Echarts/line'
import HorizontalBar from '@/components/Echarts/HorizontalBar.vue'

export default {
  name: 'skLifeSleep',
  data() {
    return {
      barLoading:true,
      resultData: null,
      pieData: [],
      lineData: [],
      barName: [],
      barData: [],
      barShow:true,
      className: '全园',
      classCount:[],
      classId:"0"
    }
  },
  props: {
    result: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    result: {
      handler(newVal) {
        this.resultData = newVal;
        this.getData();
        this.barLoading = false;
      },
      deep: true
    }
  },
  components: {
    skLifeTemplate,
    Bar,
    TrendsPie,
    HorizontalBar,
    LineChart
  },

  filters: {},

  computed: {},

  created() {},

  activated() {},

  mounted() {},

  methods: {
    // 获取班级名字
    getClassName(data) {
      this.className = data.className;
      if (data.classId) {
        this.classId = data.classId
        this.barShow = false;
        this.barName = []
        this.barData = []
        this.lineData = []
        // 柱状图数据
        this.resultData[this.resultData.length - 1].detail.map(item => {
          if (item.className == data.className) {
            item.detail.map(j=>{
              this.barName.unshift(j.stuName);
              this.barData.unshift({value:j.sleepCount,stuId:j.stuId});
            })
            this.getPieAndLineData(item);
          }
        });
        // 折线图数据
        this.resultData.map(item=>{
          item.detail.map(j=>{
            if (j.className == data.className) {
              this.lineData.push(this.$skCommon.transformNum(j.sleepRate) * 100)
            }
          })
        })
      }else{
        this.classId = "0"
        this.barName = []
        this.barData = []
        this.lineData = []
        this.getData();
      }
    },
    // 获取全园的数据
    getData(){
      this.barShow = true;
      let detail = this.resultData[this.resultData.length - 1];
      this.getPieAndLineData(detail);
      this.classCount.push(
        {className:"全园",count:this.$skCommon.transformNum(detail.average)}
      )
      this.resultData.forEach(item => {
        this.lineData.push(this.$skCommon.transformNum(item.sleepRate) * 100);
      });
      detail.detail.map((item,index)=>{
        this.classCount.push(
          {className:item.className,count:this.$skCommon.transformNum(item.average)}
        )
        this.barName.unshift(item.className);
        this.barData.unshift({value:Number(item.average).toFixed(2),classId:item.classId});
      })
    },
    getPieAndLineData(val) {
      this.pieData = [
        {
          name: '未戴',
          value: val.notWear
        },
        {
          name: '未睡眠',
          value: val.unsleep
        },
        {
          name: '一般',
          value: val.medium
        },
        {
          name: '良',
          value: val.good
        },
        {
          name: '差',
          value: val.poor
        },
        {
          name: '优',
          value: val.excellent
        }
      ];
    },
    
    viewDetail() {
      let data = {
        classId:this.classId,
        detailName:"睡眠",
        dateType:"week",
        show:false,
        stuSleepInfoShow:true,
      }
      this.$emit("lifeData",data);
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
